<template>
    <div class="app-container">
        <!-- <v-GetToolBar align="right" :MenuCode="MenuCode" :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail'
            @handeAdd='handeAdd' @handleEdit='handleEdit' @OpenFindForm='OpenFindForm'
            @handlexportData='handlexportData' @IsfunEdit='handleIsfunEdit' @IsfunDelete='handleIsfunfail'
            @handleclose='handleclose'></v-GetToolBar> -->
        <el-row>
            <el-col :span="17">
                <Search-Form class="searchTop" ref="form" size='mini' labelWidth='50px' :searchData='SearchPlan'
                    :tableCols='tableColsPlan' :searchHandle="searchHandle"  @chang="chang"></Search-Form>
            </el-col>
            <el-col :span="7">
                <div class="botton">
                    <el-button type="primary" size="small" class="botn" @click="searchData"> <i
                            class="el-icon-tickets"></i>查询</el-button>
                    <el-button type="primary" size="small" class="botn" @click="addOrder"> <i
                            class="el-icon-tickets"></i>添加</el-button>
                    <el-button type="success" size="small" class="botn" @click="addSerial"> <i
                            class="el-icon-tickets"></i>配方</el-button>
                    <el-button type="info" size="small" class="botn" @click="autoOrder"> <i
                            class="el-icon-tickets"></i>自动</el-button>
                    <el-button type="warning" size="small" class="botn" @click="pushOrder"> <i
                            class="el-icon-tickets"></i>确认</el-button>
                </div>
            </el-col>
        </el-row>

        <!-- <el-button type="warning" size="small" class="botn" @click="addHead"> <i
                        class="el-icon-tickets"></i>添加头数据</el-button> -->


        <div class="ces-mainopen">
            <div class="main" style="width: 224px;margin-right: 4px;">

                <!-- <div class="vxe"> -->
                <ComVxeTable class="vxe" size='small' :isSelection='false' :isIndex='true' :isSearch='false'
                    :isHandle='false' :ToolBarheight="keHeight" :IsfunEdit='false' :Isfunfail='false'
                    :tableData='tableData' :tableCols='tableCols' :Search='SearchWO' @refresh="refresh"
                    @handleEdit='handleEdit' @select="handselect" @selectAll="handselectAll" @handleDelete="delData"
                    @handrowclick="handrowclick">
                </ComVxeTable>
                <!-- </div> -->

            </div>



            <div class="main" style="width: 60vw;flex-grow: 1;">




                <ComVxeTable class="vxe" :widthBton="70" size='mini' :isSelection='true' :isIndex='true'
                    :searchfilter="true" :isSearch='true' :isHandle='false' :ToolBarheight="ToolBarheight"
                    :IsfunEdit='false' :Isfunfail='false' :tableData='tableDataPlan' :tableCols='tableColsPlan'
                    :Search='SearchPlan' @refresh="refresh" @handleEdit='handleEdit' @select="handselectCode"
                    @selectAll="handselectCode" @handleDelete="delData" @handrowclick="handrowclickCode">
                </ComVxeTable>
            </div>

            <div class="main" style="width: 80vw;flex-grow: 1;">




                <ComVxeTable class="vxe" :widthBton="70" :check="true" size='mini' :isSelection='false' :isIndex='true'
                    :searchfilter="true" :isSearch='true' :isHandle='false' :ToolBarheight="ToolBarheight"
                    :IsfunEdit='false' :Isfunfail='true' :tableData='tableDataThree' :tableCols='tableColsThree'
                    :Search='SearchBody' @refresh="refresh" @handleEdit='handleEdit' @select="handselectCode"
                    @selectAll="handselectAllCode" @handleDelete="delData" @handrowclick="handrowclickCode">
                </ComVxeTable>
            </div>


        </div>

    </div>
</template>

<script>


//引入组件

import ComVxeTable from "../Common/ComVxeTable.vue";
import SearchForm from "../Common/Search.vue";
import MianForm from "../Common/form.vue";

import { funDownload, GetTableColsData } from "@/api/Common";


import { getDataList, UpdateForm, DeleteForm, DeleteRow, getfunDownload } from '@/api/Loading/Loading'; //更改


import { CloseForm } from '@/api/System';
import vGetToolBar from "../Common/GetToolBar";

export default {
    //Collection/BarcodePrinting
    name: "StuffingFormOpen",
    data() {
        //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看

        return {
            // key: 1,
            FCUSTID: null,
            MenuCode: "A050106",
            tableData: [],//表格数据
            tableCols: [],//表格列数据
            searchHandle: [],
            billID: "",
            IsfunEdit: false,
            Isfunfail: true,
            SearchWO: {
                // 查询条件
                total: 0, // 总记录数
                pageSize: 0, // 一页显示的记录数
                page: 1, // /当前页码
                RNO: "1620", // 表编号  根据Controller中对应的表编号
                InterID: "1620",
                jsWhere: "", // 自定义条件
                Download: ""
                // Status: 0,
                //   BillState: "BillStateALL",
            },
            SearchPlan: {
                // 查询条件
                total: 0, // 总记录数
                pageSize: 100, // 一页显示的记录数
                page: 1, // /当前页码
                RNO: "1624", // 表编号  根据Controller中对应的表编号
                InterID: "1624",
                jsWhere: "", // 自定义条件
                // IsFieldText: '0',
                Download: "",
                Customer: '',
                // Status: 0,
                //   BillState: "BillStateALL",
            },
            SearchBody: {
                // 查询条件
                total: 0, // 总记录数
                pageSize: 1000, // 一页显示的记录数
                page: 1, // /当前页码
                RNO: "1624", // 表编号  根据Controller中对应的表编号
                InterID: "1624",
                jsWhere: "", // 自定义条件
                // IsFieldText: '0',
                Download: ""
                // Status: 0,
                //   BillState: "BillStateALL",
            },
            SearchDialog: false,
            DialogBtnMargin: 0,
            dialogVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableDataThree: [],
            tableColsThree: [],
            WO: '',
            PrdName: '',
            radio: '3',
            row: [],
            createQty: null,
            count: null,
            selectCode: [],
            SelectData: {},
            reCode: {},
            tableDataPlan: [],
            tableColsPlan: [],
            multipleTable: [],
            formInline: {
                user: '',
                region: ''
            },
            SearchData: {},
            ToolBarheight: 490,
            keHeight: 440,
        }
    },

    components: { //引入组件后注册组件
        vGetToolBar,
        SearchForm,
        MianForm,
        ComVxeTable
    },
    mounted() {
        this.getDataList()
    }, props: {
        ParmType: String,
        index: Int16Array,
    },
    methods: {
        chang(ToolBarheight) {
            // this.ToolBarheight = this.ToolBarheight + ToolBarheight/2
            // this.keHeight = this.keHeight + ToolBarheight/2
        },
        async searchData() {
            const res = await getDataList({ data: JSON.stringify(this.SearchPlan) });
            this.tableDataPlan = res.data.Table
            // this.SearchPlan
            // debugger
            this.SearchPlan.total = res.data.Table1[0].RecordCount
        },
        async addSerial() {
            if (this.selectCode.length != 1) {
                this.$message.warning('请选一条数据')
                return
            }
            // this.SearchPlan.jsWhere = `and  ProductNo = '${this.selectCode[0].ProductNo}' and FCUSTID = '${this.FCUSTID}' `
            const resCols = await getDataList({ data: JSON.stringify(this.SearchPlan) });
            // this.tableDataThree = resCols.data.Table
            this.tableDataThree.push(...resCols.data.Table)
            this.tableDataThree = [...new Set(this.tableDataThree)]
            this.SearchBody.total = this.tableDataThree.length
        },
        autoOrder() {
            this.tableDataThree.push(...this.tableDataPlan)
            this.tableDataThree = [...new Set(this.tableDataThree)]
            this.SearchBody.total = this.tableDataThree.length
        },
        pushOrder() {
            if (this.tableDataThree.length == 0) {
                this.$message.warning('请先添加数据')
                return
            }
            this.$emit('FunrRowsAdd', this.tableDataThree, this.ParmType);
        },
        addOrder() {
            if (this.selectCode.length == 0) {
                this.$message.warning('请选择数据')
                return
            }
            this.tableDataThree.push(...this.selectCode)
            this.tableDataThree = [...new Set(this.tableDataThree)]
            this.SearchBody.total = this.tableDataThree.length
        },
        async addHead() {
            const result = await UpdateForm({
                IsPostBack: false,
                InterID: this.SearchPlan.InterID,
            });
            this.tableDataPlan.push(result.data1.Table[0])
        },
        handleInput(value) {
            if (value == 1) {
                this.tableDataPlan = this.tableDataPlanSave.filter(v => v.PRINTEDTIMES == 1)
            } else {
                this.tableDataPlan = this.tableDataPlanSave.filter(v => v.PRINTEDTIMES != 1)
            }
        },
        handselectCode(row) {
            this.selectCode = row
            // debugger
        },
        onSubmit() {
        },
        //搜索重置
        refresh() {
            // alert(this.SearchPlan.page)
            this.handrowclick();
        },
        reform() {
            this.Search = {
                // 查询条件
                // total: 0, // 总记录数
                pageSize: 14, // 一页显示的记录数
                page: 1, // /当前页码
                RNO: "4", // 表编号  根据Controller中对应的表编号
                jsWhere: "", // 自定义条件

            };
            this.getDataListCe();
        },
        async getDataList() {
            const res = await getDataList({ data: JSON.stringify(this.SearchWO) });
            this.tableData = res.data.Table;
            this.tableCols = res.data1;
            // debugger

            this.SearchPlan.jsWhere = `and  1 = 2`
            const resCols = await getDataList({ data: JSON.stringify(this.SearchPlan) });
            this.tableColsPlan = resCols.data1;
            this.SearchPlan.jsWhere = ''
            // debugger

            // this.SearchBody.jsWhere = `and  1 = 2`
            // const resThree = await getDataList({ data: JSON.stringify(this.SearchBody) });
            this.tableColsThree = resCols.data1;
            // debugger
        },
        OpenFindForm() {
            //打开搜索框
            this.SearchDialog = true;
            //计算外边距
            console.log(this.$refs.searchDialog.offsetHeight);
            this.DialogBtnMargin = this.$refs.searchDialog.offsetHeight - 40;
        }, handlexportData() {
            funDownload("334", JSON.stringify(this.Search));
        }, handleIsfunEdit() {
            this.IsfunEdit = true;
        }, handleIsfunfail() {
            this.Isfunfail = true;
        }, async handeAdd() {
            // 新建

            let routeUrl = this.$router.push({
                path: "/System/PageAutoForm",
                query: { billID: "", IsPostBack: false },
            });
            window.open(routeUrl.path, "_top");

        },
        async handleEdit(scope) {
            // 修改

            let routeUrl = this.$router.push({
                path: "/System/PageAutoForm",
                query: { billID: scope.row.InterID, IsPostBack: false },
            });
            window.open(routeUrl.href, "_top");

            this.inputName = row.InterID;


        }, delData(scope) {
            // debugger
            this.$confirm('删除操作, 是否继续?', '提示', {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            }).then(() => {
                this.tableDataThree.splice(scope.rowIndex, 1)
            })

        },
        async handrowclick(row) {
            // if (row) {
            //     this.FCUSTID = row.row.FCUSTID
            //     this.SearchPlan.jsWhere = `and FCUSTID = '${row.row.FCUSTID}'`
            // }
            // alert(1)
            if (row) {
                // this.FCUSTID = row.row.FCUSTID
                this.SearchPlan.Customer = row.row.Customer
               // this.SearchPlan.FCUSTID = row.row.FCUSTID
                // this.SearchPlan.jsWhere = `and FCUSTID = '${row.row.FCUSTID}'`
            }
            const resCols = await getDataList({ data: JSON.stringify(this.SearchPlan) });
            this.tableDataPlan = resCols.data.Table
            // this.SearchPlan
            // debugger
            this.SearchPlan.total = resCols.data.Table1[0].RecordCount

            // this.key = this.key + 1
        },
        handleclose() {


            if (this.billID != "") {

                this.$confirm('关单操作, 是否继续? 订单号：' + this.billID, '提示', {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                })
                    .then(async () => {



                        const result = await CloseForm({

                            billID: this.billID,
                            types: 1,
                            IsPostBack: false,
                        });
                        this.getDataListCe();
                        this.$message({
                            type: "success",
                            message: result.msg,
                        });

                    })
                    .catch((err) => {
                        console.error(err);
                    });
            } else {
                this.$notify({
                    title: "关单操作，请选择数据" + this.billID,
                    dangerouslyUseHTMLString: true,
                    message: "",
                    type: "error",
                });
            }



        },


    }
}
</script>

<style lang="scss" scoped>
.ces-mainopen {
    display: flex;
    flex-wrap: wrap;
    height: 100%;

    // width: 98vw;
    .botn {
        margin: 2px 0 2px 2px;
    }

    .main {
        // flex: 1;
        background-color: #fff;
        border-radius: 4px;
        padding: 4px;
        margin-bottom: 4px;
        height: 40vh;

        .inp {
            float: right;
            // display: inline-block;
            width: 100px;
            margin-left: 2px;
            transform: translateY(2px);
        }

        /deep/ .el-radio__label {
            font-size: 12px
        }

        .check {
            margin-left: 12px;
            transform: translateY(2px);
            margin-right: 0;
            padding-top: 8px;
            width: 66px;

        }

        /deep/ .vxe .el-input__inner {
            height: 22px;
        }



        .float {
            float: right;
        }
    }
}

.dialog {

    /deep/ .el-dialog {
        margin-top: 50vh !important;
        transform: translateY(-50%);
    }

    table {
        width: 100%;
        border-collapse: collapse;

        /* 合并相邻的边框 */
        td {
            border: 1px solid #000;
            padding: 15px;
            /* 添加内边距 */
            text-align: left;
            /* 文字左对齐 */
        }

        tr td:first-child {
            width: 30%;
        }

    }
}



.app-container {
    position: relative;
    background-color: rgb(255, 255, 255);

    // padding-bottom: 100px;
    .botton {
        float: right;
        padding-top: 8px;
        padding-right: 6px;
    }

    .EditObjs-table {
        margin-top: 30px;
    }

    .permission-tree {
        margin-bottom: 5px;
    }
}

.searchDialog ::v-deep .el-dialog__header {
    background: #409eff;
}

.searchDialog ::v-deep .el-dialog__title {
    color: #fff;
}

.searchDialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}
</style>